<style lang="less" scoped>
@import "../../styles/common.less";
@import "./components/table.less";
.detail-item {
  width: 33.333%;
  padding: 8px 12px 8px 0;
  @media screen and (max-width: 768px) {
    width: 100%;
    border-bottom: 1px dotted #ddd;
  }
}
.info-panel {
  margin-top: 10px;
}
.info-panel:last-of-type {
  align-self: flex-start;
}
.top10-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 4px 0;
  border-bottom: 1px dashed #ccc;
}
.top10-row:first-of-type {
  padding-top: 0;
}
.top10-row:last-of-type {
  border-bottom: none;
}
.top10-name {
  padding: 0 4px;
  color: #000;
}
.top10-digit {
  padding: 0 4px;
  color: #444;
}
</style>

<template>
    <div>
        <Row>
            <Card style="margin-bottom: 16px;">
                <div slot="title" style="padding: 0 12px;">
                    <h4 style="display: inline-block; margin-right: 8px">终端详情：{{this.clientData[0].name}}</h4> 
                    <Button type="primary" shape="circle" @click="jump2Analysis()" style="display: inline-block; padding: 4px 8px; margin-left: 8px"><Icon type="medkit"></Icon> </Button>
                </div>
                <div style="padding: 0 12px; display: flex; justify-content: flex-start; flex-wrap: wrap;">
                    <div class="detail-item"><strong>名称: </strong>{{clientData[0].name}}</div>
                    <div class="detail-item"><strong>mac: </strong>{{clientData[0].mac}}</div>
                    <div class="detail-item"><strong>角色: </strong>{{clientData[0].role}}</div>
                    <div class="detail-item"><strong>最近连接设备: </strong><a :href="`#/AP-detail/${clientData[0].last_device}`">{{clientData[0].last_device}}</a></div>
                    <div class="detail-item"><strong>最近用户名: </strong>{{clientData[0].last_username}}</div>
                    <div class="detail-item"><strong>连接模式: </strong>{{clientData[0].connection_mode}}</div>
                    <div class="detail-item"><strong>最近连接时间: </strong>{{clientData[0].last_associated_time}}</div>
                    <div class="detail-item"><strong>首次发现时间: </strong>{{clientData[0].first_seen}}</div>
                    <div class="detail-item"><strong>最近发现时间: </strong>{{clientData[0].last_seen}}</div>
                    <div class="detail-item"><strong>AOS终端类型: </strong>{{clientData[0].AOS_device_type}}</div>
                    <div class="detail-item"><strong>终端类型: </strong>{{clientData[0].device_type}}</div>
                    <div class="detail-item"><strong>生产商: </strong>{{clientData[0].manufacturer}}</div>
                    <div class="detail-item"><strong>型号: </strong>{{clientData[0].model}}</div>
                    <div class="detail-item"><strong>序列号: </strong>{{clientData[0].serial}}</div>
                    <div class="detail-item"><strong>网络接口厂商: </strong>{{clientData[0].network_interface_vender}}</div>
                </div>
            </Card>
            <Card style="min-height: 200px; margin-bottom: 16px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <h4><Icon style="padding:0 4px" type='wifi'/>可侦测到该终端的设备</h4>
                </div>
                <Row>
                    <Col span="24">
                        <Table :columns="radioColumns" :data="clientData[0].radios" size="small" ref="tableCsv"></Table>
                    </Col>
                </Row>
            </Card>
            <Card style="min-height: 200px; margin-bottom: 16px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <h4><Icon style="padding:0 4px" type='network'/>历史关联记录</h4>
                </div>
                <Row>
                    <Col span="24">
                        <Table :columns="historyColumns" :data="clientData[0].history" size="small" ref="tableCsv"></Table>
                    </Col>
                </Row>
            </Card>
            <!-- <Card style="min-height: 200px; margin-bottom: 16px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <h4><Icon style="padding:0 4px" type='ios-browsers'/>热门应用</h4>
                </div>
                <Row>
                    <Col span="24">
                        <Table :columns="webColumns" :data="clientData[0].web" size="small" ref="tableCsv"></Table>
                    </Col>
                </Row>
            </Card> -->
            <Card style="min-height: 200px; margin-bottom: 16px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <h4><Icon style="padding:0 4px" type='ios-browsers'/>历史认证记录</h4>
                </div>
                <Row>
                    <Col span="24">
                        <Table :columns="webColumns" :data="clientData[0].web" size="small" ref="tableCsv"></Table>
                    </Col>
                </Row>
            </Card>
            <Card style="min-height: 200px; margin-bottom: 16px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <h4><Icon style="padding:0 4px" type='ios-browsers'/>当前在线会话</h4>
                </div>
                <Row>
                    <Col span="24">
                        <Table :columns="currentSessionColumns" :data="clientData[0].web" size="small" ref="tableCsv"></Table>
                    </Col>
                </Row>
            </Card>
            <Card style="min-height: 200px; margin-bottom: 16px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <h4><Icon style="padding:0 4px" type='android-warning'/>历史故障</h4>
                </div>
                <Row>
                    <Col span="24">
                        <Table :columns="eventColumns" :data="eventData" size="small" ref="tableCsv"></Table>
                    </Col>
                </Row>
            </Card>
            <Card style="min-height: 500px;">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <Tabs :value="tagMode" type="card" style="margin-bottom: 0" @on-click="switchLineTab">
                        <TabPane label="健康度" name="health"></TabPane>
                        <TabPane label="出入带宽" name="bandwidth"></TabPane>
                        <TabPane label="流量与速度" name="dataSpeed"></TabPane>
                    </Tabs>
                    <div>
                        <Tooltip content="数据下载">
                            <Button type="text" style="padding: 4px 4px 0"><Icon type="ios-cloud-download-outline" size="24"></Icon> </Button>
                        </Tooltip>
                    </div>
                </div>
                <Row :gutter="10">
                    <div>
                        <chart :options="selectedOption" style="width: 100%;" auto-resize></chart>
                    </div>
                </Row>
            </Card>
            <Row :gutter="10" type="flex" justify="start">
                <Col :sm="24" :md="12" :lg="8" class="info-panel">
                    <Card style="min-height: 300px">
                        <div slot="title">
                            <h4>连接radio分布</h4>
                            <Tooltip content="数据下载" style="position: absolute; right: 12px; top: 12px;">
                                <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                            </Tooltip>
                        </div>
                        <div>
                            <chart :options="radioTypeOption" style="width: 100%; height: 300px;" auto-resize></chart>
                        </div>
                    </Card>
                </Col>
                <Col :sm="24" :md="12" :lg="8" class="info-panel">
                    <Card style="min-height: 300px">
                        <div slot="title">
                            <h4>故障种类分布</h4>
                            <Tooltip content="数据下载" style="position: absolute; right: 12px; top: 12px;">
                                <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                            </Tooltip>
                        </div>
                        <div>
                            <chart :options="eventTypeOption" style="width: 100%; height: 300px;" auto-resize></chart>
                        </div>
                    </Card>
                </Col>
                <Col :sm="24" :md="12" :lg="8" class="info-panel">
                    <Card style="min-height: 300px">
                        <div slot="title">
                            <h4>常用用户名</h4>
                            <Tooltip content="全量数据" style="position: absolute; right: 12px; top: 12px;">
                                <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                            </Tooltip>
                        </div>
                        <div style="height: 300px; padding: 0 8px">
                            <div class="top10-row"><span class="top10-name">1224813132</span><span class="top10-digit">12442</span></div>
                            <div class="top10-row"><span class="top10-name">1224813174</span><span class="top10-digit">34</span></div>
                            <div class="top10-row"><span class="top10-name">1224813141</span><span class="top10-digit">11</span></div>
                            <div class="top10-row"><span class="top10-name">1224813133</span><span class="top10-digit">1</span></div>
                        </div>
                    </Card>
                </Col>
                <Col :sm="24" :md="12" :lg="8" class="info-panel">
                    <Card style="min-height: 300px">
                        <div slot="title">
                            <h4>常连接AP</h4>
                            <Tooltip content="全量数据" style="position: absolute; right: 12px; top: 12px;">
                                <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                            </Tooltip>
                        </div>
                        <div style="height: 300px; padding: 0 8px">
                            <div class="top10-row"><span class="top10-name">70:3a:0e:cb:6b:9c</span><span class="top10-digit">12442</span></div>
                            <div class="top10-row"><span class="top10-name">70:3a:0e:cb:6b:9c</span><span class="top10-digit">34</span></div>
                            <div class="top10-row"><span class="top10-name">70:3a:0e:cb:6b:9c</span><span class="top10-digit">11</span></div>
                            <div class="top10-row"><span class="top10-name">70:3a:0e:cb:6b:9c</span><span class="top10-digit">1</span></div>
                            <div class="top10-row"><span class="top10-name">70:3a:0e:cb:6b:9c</span><span class="top10-digit">1</span></div>
                            <div class="top10-row"><span class="top10-name">70:3a:0e:cb:6b:9c</span><span class="top10-digit">1</span></div>
                            <div class="top10-row"><span class="top10-name">70:3a:0e:cb:6b:9c</span><span class="top10-digit">1</span></div>
                            <div class="top10-row"><span class="top10-name">70:3a:0e:cb:6b:9c</span><span class="top10-digit">1</span></div>
                            <div class="top10-row"><span class="top10-name">70:3a:0e:cb:6b:9c</span><span class="top10-digit">1</span></div>
                        </div>
                    </Card>
                </Col>
                <Col :sm="24" :md="12" :lg="8" class="info-panel">
                    <Card style="min-height: 300px">
                        <div slot="title">
                            <h4>活动位置Top10</h4>
                            <Tooltip content="全量数据" style="position: absolute; right: 12px; top: 12px;">
                                <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                            </Tooltip>
                        </div>
                        <div style="height: 300px; padding: 0 8px">
                            <div class="top10-row"><span class="top10-name"><a href="">教学楼1层</a></span><span class="top10-digit">7491</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="">图书馆2层</a></span><span class="top10-digit">1345</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="">综合楼1层</a></span><span class="top10-digit">513</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="">实验楼12层</a></span><span class="top10-digit">424</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="">5号宿舍5层</a></span><span class="top10-digit">194</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="">5号宿舍3层</a></span><span class="top10-digit">185</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="">5号宿舍2层</a></span><span class="top10-digit">185</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="">图书馆10层</a></span><span class="top10-digit">185</span></div>
                            <div class="top10-row"><span class="top10-name"><a href="">教学楼2层</a></span><span class="top10-digit">185</span></div>
                        </div>
                    </Card>
                </Col>
                <Col :sm="24" :md="12" :lg="8" class="info-panel">
                    <Card style="min-height: 300px">
                        <div slot="title">
                            <h4>最近考勤</h4>
                            <Tooltip content="全量数据" style="position: absolute; right: 12px; top: 12px;">
                                <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                            </Tooltip>
                        </div>
                        <div style="height: 300px; padding: 0 8px">
                            <div class="top10-row"><span class="top10-name">高等数学（甲）</span><span class="top10-digit">18年4月4日 09:03:22</span></div>
                            <div class="top10-row"><span class="top10-name">有机化学</span><span class="top10-digit">18年4月3日 16:45:00</span></div>
                            <div class="top10-row"><span class="top10-name">分析化学</span><span class="top10-digit">18年4月3日 10:48:50</span></div>
                            <div class="top10-row"><span class="top10-name">马克思主义哲学</span><span class="top10-digit">18年4月2日 16:45:32</span></div>
                        </div>
                    </Card>
                </Col>
                <div class="info-panel"></div>
            </Row>
        </Row>
    </div>
</template>

<script>
import {
  clientData,
  clientColumns,
  radioColumns,
  historyColumns,
  webData,
  webColumns,
  currentSessionColumns
} from "./data/client.js";
import { eventData, eventColumns } from "../event/data/event"
import { clientHealthOption } from "./analysis-data/client-health";
import { deviceTypeOption } from "./analysis-data/pie/client-type";
import { eventTypeOption } from "./analysis-data/pie/event-type";
import { radioTypeOption } from "./analysis-data/pie/radio";
import { signalOption } from "./analysis-data/signal";
import { bandwidthOption } from './analysis-data/bandwidth.js';
import { dataSpeedOption } from './analysis-data/data-speed.js';
import moment from "moment";

export default {
  name: "client-detail",
  data() {
    return {
      clientData,
      clientColumns,
      clientData,
      radioColumns,
      webData,
      webColumns,
      eventData,
      eventColumns,
      currentSessionColumns,
      historyColumns,
      tableMode: "AP",
      selectedDateRange: [
        moment()
          .subtract(6, "days")
          .format("L"),
        moment().format("L")
      ],
      dateOptions: {
        disabledDate(date) {
          const disabledDay = date.getDate();
          return date && date.valueOf() > Date.now();
        }
      },
      tagMode: "health",
      deviceTypeOption,
      eventTypeOption,
      radioTypeOption,
      bandwidthOption,
      dataSpeedOption,
      loadingDevice: false,
      selectedDevice: this.$route.query.id || "SLR01-WiFi-08a",
      deviceOptions: []
    };
  },
  computed: {
    selectedOption() {
      return {
        health: clientHealthOption,
        signal: signalOption,
        bandwidth: bandwidthOption,
        dataSpeed: dataSpeedOption,
        event: eventTypeOption
      }[this.tagMode];
    }
  },
  methods: {
    jump2Analysis(value) {
      this.$router.push({
        name: "event-test",
      });
    },
    switchLineTab(name) {
      this.tagMode = name;
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.tableCsv.exportCsv({
          filename: "原始数据"
        });
      } else if (type === 2) {
        this.$refs.tableCsv.exportCsv({
          filename: "排序和过滤后的数据",
          original: false
        });
      }
    }
  }
};
</script>
